<template>
	<view class="hui">
		<u-sticky bgColor="#fff">
			<view class="s_box">
				<u-search :showAction="true" v-model="text" placeholder="请输入手机号/设备编码" actionText="搜索" :animation="false"
					@custom="getList"></u-search>
			</view>
			<u-tabs :current="current" :list="tab" @click="click" lineColor="#3C7CFF" lineWidth="40"
				:activeStyle="{color:'#3C7CFF',fontWeight:'bold'}" :inactiveStyle="{color: '#9296AF'}"
				itemStyle='height:80rpx;width:200rpx;'></u-tabs>
		</u-sticky>
		<view class="list_box">
			<view class="info_box" v-for="item in list" :key="item.id">
				<view>
					<view class="b_m_b b_flex_c_s">
						<view>订单号: {{item.orderId}}</view>
						<view>设备编码: {{item.deviceNumber}}</view>
					</view>
					<view class="b_m_b">手机号: {{item.phone}}</view>
					<view class="b_m_b">医院名称: {{item.hospitalName}}</view>
					<view class="b_m_b">开始时间: {{item.createTime}}</view>
					<view class="b_m_b">结束时间: {{item.completeTime?item.completeTime:''}}</view>
					<view class="b_m_b">租用时长: {{item.leaseTimes}}</view>
					<view class="b_m_b b_flex_c_s">
						<view>使用计费:{{item.price-item.timeoutPrice}}</view>
						<view>超时费用:{{item.timeoutPrice}}</view>
						<view>租用押金:{{item.deposit?item.deposit:0}}</view>
					</view>
					<view>使用状态:
						<span v-if="item.complete">已完成</span><span v-else>使用中</span>
					</view>
				</view>

				<view class="b_flex_c_s_w mt">
					<view v-if="!item.complete" class="shen_color edit_box" @click="complete(item)">后台操作还床</view>
					<view
						v-if="item.deviceDeposit&&(item.deviceDeposit.refund<=0||item.deviceDeposit.refundPrice<item.deviceDeposit.price)"
						class="edit_box green_color" @click="refund(item)">全额退款</view>
					<view @click="$project.toPath('/pages/tool/bedInfo?id='+item.id)" class="edit_box info_color">详情
					</view>
				</view>
			</view>
		</view>

		<empty v-if="emptyShow" text="暂无订单"></empty>
	</view>
</template>

<script>
	import {
		adminList,
		adminComplete,
		adminRefund
	} from '@/require/api.js';
	import empty from '@/components/empty.vue';
	export default {
		components: {
			empty
		},
		data() {
			return {
				current: 0,
				tab: [{
						name: '全部',
						val: ''
					},
					{
						name: '使用中',
						val: 0
					},
					{
						name: '已完成',
						val: 1
					}
				],
				params: {
					page: 1,
					limit: 20,
					complete: '',
					materials: 'accompanyingBed',
					phone: '',
					deviceNumber: ''
				},
				text: '',
				list: [],
				total: '',
				emptyShow: false
			}
		},
		onShow() {
			if (this.params.page > 1) {
				this.params.limit = this.params.page * this.params.limit;
				this.params.page = 1;
			}
			this.getList();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.params.page++;
				adminList(this.params).then(res => {
					res.data.list.forEach((res) => {
						this.list.push(res);
					});
				});
			}
		},
		methods: {
			async complete(item) {
				let _ = this;
				uni.showModal({
					title: '确认是否还床?',
					success(res) {
						if (res.confirm) {
							adminComplete({
								id: item.id
							}).then(res => {
                              _.$project.toast('操作成功');
							  _.getList();
							});
						}
					}
				})
			},
			async refund(item) {
                let _ = this;
                uni.showModal({
                	title: '确认是否全额退款?',
                	success(res) {
                		if (res.confirm) {
                			adminRefund({
                				id: item.id
                			}).then(res => {
                              _.$project.toast('操作成功');
                			  _.getList();
                			});
                		}
                	}
                })
			},
			async click(e) {
				this.params.page = 1;
				this.params.complete = e.val;
				await this.getList();
			},
			async getList() {

				if (this.text) {
					if (this.$project.isMobile(this.text)) {
						this.params.phone = this.text;
						this.params.deviceNumber = '';
					} else {
						this.params.deviceNumber = this.text;
						this.params.phone = '';
					}
				} else {
					this.params.phone = '';
					this.params.deviceNumber = ''
				}

				let {
					data
				} = await adminList(this.params);
				if (data.list.length < 1 || !data.list) {
					this.emptyShow = true;
				} else {
					this.emptyShow = false;
				}
				this.list = data.list;
				this.total = data.total;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list_box {
		box-sizing: border-box;
		padding: 0 25rpx 0 25rpx;
		background: #fff;
		margin: 20rpx 0 0 0;
	}

	.info_box {
		box-sizing: border-box;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #E6E6E6;
		font-size: 28rpx;
	}

	.text {
		font-size: 35rpx;
	}

	.shen_color {
		background: #3C9CFF;
	}

	.green_color {
		background: rgb(4, 192, 172);
	}

	.info_color {
		background: #13ce66;
	}

	.edit_box {
		width: 49%;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		border-radius: 35rpx;
		margin-bottom: 5rpx;
	}

	.mt {
		margin-top: 10rpx;
	}

	.s_box {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 20rpx 0 20rpx;
	}
</style>